<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="" href="../css/public.css">
    <link rel="stylesheet" type="text/css" href="../css/regist.css" />
</head>
<script src="../js/jquery.js"></script>

<body>
    <div id="wrap">
        <header>
            <div class="content">
                <ul class="fl">
                    <li><a href="../index.html" style="color: orangered;">91人气App(商家版)</a></li>
                    <li style="border: none;"><a href="">注册</a></li>
                </ul>
                <ul class="fr">
                    <li><a href="../index.html">欢迎使用91人气!</a></li>
                    <li><a href="login.html">登录</a></li>
                    <li><a href="../index.html">返回首页</a></li>
                    <li><a href="">帮助中心</a></li>
                    <li style="border: none;"><a href="">联系客服</a></li>
                </ul>
            </div>
        </header>
        <ul class="indicate">
            <li class="bar huang">
                <span>1</span>
                <p>创建账户</p>
            </li>
            <li class="line"></li>
            <li class="bar">
                <span>2</span>
                <p>设置身份信息</p>
            </li>
            <li class="line"></li>
            <li class="bar">
                <span>3</span>
                <p>成功</p>
            </li>
        </ul>
        <div id="main" style="background: #e1e1e1;">
            <form>
                <div class="reg_div">
                    <p class="tab">
                        <span>
              <img src="http://s.91renqi.com/assets/4_0/img/logreg/regimg_13.png" alt="">
              个人用户
            </span>
                        <span style="margin-left:-4px">
              <img src="http://s.91renqi.com/assets/4_0/img/logreg/regimg_16.png" alt="">
              企业用户
            </span>
                    </p>
                    <ul class="reg_ul">
                        <li>
                            <span>用户名：</span>
                            <input type="text" name="" value="" placeholder="4-8位用户名" class="reg_user">
                            <span class="tip user_hint"></span>
                        </li>
                        <li>
                            <span>密码：</span>
                            <input type="password" name="" value="" placeholder="6-16位密码" class="reg_password">
                            <span class="tip password_hint"></span>
                        </li>
                        <li>
                            <span>确认密码：</span>
                            <input type="password" name="" value="" placeholder="确认密码" class="reg_confirm">
                            <span class="tip confirm_hint"></span>
                        </li>
                        <li>
                            <span>邮箱：</span>
                            <input type="email" name="" value="" placeholder="邮箱" class="reg_email">
                            <span class="tip email_hint"></span>
                        </li>
                        <li>
                            <span>手机号码：</span>
                            <input type="tel" name="" value="" placeholder="手机号" class="reg_mobile">
                            <span class="tip mobile_hint"></span>
                        </li>
                        <li>
                            <input type="checkbox"><b>同意<a>《91用户注册协议》</a></b>
                        </li>
                        <li>
                            <button type="button" name="button" class="red_button">下一步</button>
                        </li>
                    </ul>
            </form>
            </div>
        </div>
        <footer>
            <div class="content">
                <ul>
                    <li>
                        <img src="http://s.91renqi.com/assets/4_0/img/logreg/regds_03.png" alt="">
                        <p>
                            <span>新人体验礼</span><br> 会员G币免费拿
                        </p>
                    </li>
                    <li>
                        <img src="http://s.91renqi.com/assets/4_0/img/logreg/regds_06.png" alt="">
                        <p>
                            <span>商家指南针</span><br> 教您操作流程技巧
                        </p>
                    </li>
                    <li>
                        <img src="http://s.91renqi.com/assets/4_0/img/logreg/regds_08.png" alt="">
                        <p>
                            <span>活动福满多</span><br> 每天有福利，每月都惊喜
                        </p>
                    </li>
                </ul>
            </div>
        </footer>
    </div>
</body>
<script>
    $(function() {
        //根据浏览器高度设置wrap高度
        $('#wrap').css("height", window.innerHeight);
        //.tab背景切换
        $('.tab span').each(function(i) {
            $('.tab span').eq(i).click(function() {
                $('.tab span').css({
                    background: "gray",
                    color: "black"
                });
                if (0 == i) {
                    $(this).css({
                        background: "orange",
                        color: "white"
                    })
                    $("button[type=button]").css("background", "orange");
                    $('.indicate li').eq(0).removeClass("lan");
                    $('.indicate li').eq(0).addClass("huang");
                } else {
                    $(this).css({
                        background: "#2c73b7",
                        color: "white"
                    });
                    $("button[type=button]").css("background", "#2c73b7");
                    $('.indicate li').eq(0).removeClass("huang");
                    $('.indicate li').eq(0).addClass("lan");
                }
            })
        })

        //form表单验证
        var user_Boolean = false;
        var password_Boolean = false;
        var varconfirm_Boolean = false;
        var emaile_Boolean = false;
        var Mobile_Boolean = false;
        $('.reg_user').blur(function() {
            if ((/^[a-z0-9_-]{4,8}$/).test($(".reg_user").val())) {
                $('.user_hint').html("✔").css("color", "green");
                user_Boolean = true;
            } else {
                $('.user_hint').html("×").css("color", "red");
                user_Boolean = false;
            }
        });
        // password
        $('.reg_password').blur(function() {
            if ((/^[a-z0-9_-]{6,16}$/).test($(".reg_password").val())) {
                $('.password_hint').html("✔").css("color", "green");
                password_Boolean = true;
            } else {
                $('.password_hint').html("×").css("color", "red");
                password_Boolean = false;
            }
        });


        // password_confirm
        $('.reg_confirm').blur(function() {
            if (($(".reg_password").val()) == ($(".reg_confirm").val())) {
                $('.confirm_hint').html("✔").css("color", "green");
                varconfirm_Boolean = true;
            } else {
                $('.confirm_hint').html("×").css("color", "red");
                varconfirm_Boolean = false;
            }
        });


        // Email
        $('.reg_email').blur(function() {
            if ((/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/).test($(".reg_email").val())) {
                $('.email_hint').html("✔").css("color", "green");
                emaile_Boolean = true;
            } else {
                $('.email_hint').html("×").css("color", "red");
                emaile_Boolean = false;
            }
        });


        // Mobile
        $('.reg_mobile').blur(function() {
            if ((/^1[34578]\d{9}$/).test($(".reg_mobile").val())) {
                $('.mobile_hint').html("✔").css("color", "green");
                Mobile_Boolean = true;
            } else {
                $('.mobile_hint').html("×").css("color", "red");
                Mobile_Boolean = false;
            }
        });


        // click
        $('.red_button').click(function() {
            if (user_Boolean && password_Boolean && varconfirm_Boolean && emaile_Boolean && Mobile_Boolean == true && $('input[type=checkbox]').prop("checked")) {

                //ajax请求
                $.ajax({
                    type: "post",
                    url: "http://127.0.0.1:8000/regist",
                    async: true,
                    data: {
                        username: $('input[type=text]').val(),
                        password: $('input[type=password]').val(),
                        email: $('input[type^=e]').val(),
                        tel: $('input[type^=t]').val()
                    },
                    success: function(data) {
                        console.log(data);
                        if (data == "注册成功") {
                            $("#main").html("厉害了我的哥<button class='next'>下一步</button>");
                            if ($('.indicate li').eq(0).hasClass("huang")) {
                                $('.indicate li').eq(2).addClass("huang");
                            } else {
                                $('.indicate li').eq(2).addClass("lan");
                            }
                            $(".next").bind("click", function() {
                                $("#main").html("<center><h1>注册完成</h1></center>");
                                if ($('.indicate li').eq(0).hasClass("huang")) {
                                    $('.indicate li').eq(4).addClass("huang");
                                } else {
                                    $('.indicate li').eq(4).addClass("lan");
                                }
                            });
                        } else {
                            alert("账号已存在");
                        }
                    }
                });
            } else {
                alert("请完善信息");
            }
        });


    });
</script>

</html>